<template>
    <div>
        <van-nav-bar left-arrow id="icon" @click-left="onClickLeft"></van-nav-bar>
         <div id="container">
            <div id="search_wrap">
                <search></search>
            </div>
         </div>
    </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import Search from '@/components/Search/Search.vue';
    export default {
  components: { Search },
        data() {
            return {
                map: ''
            }
        },
        mounted(){
            this.initMap()
        },
        methods:{
            onClickLeft() {
            this.$router.back();
            },
            initMap(){
                AMapLoader.load({
                    "key":"26f1591b4053f41cf0b65fa82a4d3f00",
                    "version":"2.0",
                    "plugins":[
                        'AMap.ToolBar',
                        'AMap.Scale',
                        'AMap.HawkEye',
                        'AMap.MapType',
                        'AMap.Geolocation',
                        ],
                }).then((AMap)=>{
                    this.map = new AMap.Map('container',{
                        viewMode:'3D',
                        zoom:11,
                        center:[113.78,34.76]
                    },)
                    // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
                    this.map.addControl(new AMap.ToolBar());
                    // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
                    this.map.addControl(new AMap.Scale());
                    // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
                    this.map.addControl(new AMap.HawkEye({isOpen:true}));               
                    // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
                    this.map.addControl(new AMap.MapType());               
                    // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
                    this.map.addControl(new AMap.Geolocation());
                }).catch(e=>{
                    console.log(e); //加载错误提示
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
#container{
    margin: 5%;
    width: 90%;
    height: 50vh;
    border: 1px solid black;
    position: relative;
    #search{
        position: absolute;
        top: -100%;
        left: -10%;
        height: 60px;
        width: 380px;
    }
}
</style>